<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../jquery.min.js"></script>
    <script src="../mustache.min.js"></script>
    <script src="../node_modules/lodash/lodash.min.js"></script>
    <script src="../js/clickNavigation.js"></script>
    <link rel="stylesheet" href="../css/navigation_bar.css">
    <link rel="stylesheet" href="../css/goods_list.css">
    <script type="x-tmpl-mustache" id="goods_template">
        <tbody>
            {{#goodsInfo}}
            <tr>
               <td>{{type}}</td><td>{{name}}</td><td>{{price}}</td><td>{{unit}}</td><td><button id={{id}}>加入购物车</button></td>
            </tr>
            {{/goodsInfo}}
        </tbody>
    </script>
    <script src="../js/goodsList.js"></script>
    <title></title>
</head>
<body>
    <div class="navigation_bar">
       <div class="navigation">
          <p id="go">Let's Go</p>
          <p id="to_main">主页</p>
          <p style="color: white; background: rgb(8, 8, 8)">商品列表</p>
          <div id="to_shop_car" class="nav_shop_car">
             <img src="../image/shop_car.png" />
             <p>购物车<span> (0)</span></p>
          </div>
       </div>
    </div>

    <div class="goods_list">
        <div class="title_bar">
            <h2>商品列表</h2>
        </div>
        <div class="goods_info">
            <table>
                <thead>
                <tr>
                    <th style="width: 21%;">分类</th>
                    <th style="width: 21%;">名称</th>
                    <th style="width: 20%;">单价(元)</th>
                    <th style="width: 12%;">单位</th>
                    <th style="width: 30%;"></th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

</body>
</html>